/**
 *  学习目标：组件生命周期钩子 - 更新时
 */
import React from 'react'

export default class App extends React.Component {
  state = {
    count: 1,
  }

  render() {
    return (
      <>
        <h1>父组件</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>点击加1</button>
        <Son count={this.state.count} />
      </>
    )
  }
}

class Son extends React.Component {
  state = {
    number: 11,
  }
  // 💥render 生命周期注意点：
  //    1. 不能直接调用 setState (会导致死循环)
  //    2. 不要在 render 内写定时器 (定时器会累加)
  render() {
    console.log('子组件render被调用了')
    // 💥💥 以下代码写到 render 内部会导致死循环
    // setInterval(() => {
    //   this.setState({ number: 22 })
    // }, 100)
    return (
      <>
        <h2>子组件</h2>
        <h3>{this.props.count}</h3>
        <h4>累加{this.state.number}</h4>
      </>
    )
  }

  componentDidMount() {
    // 定时器可以写到 componentDidMount 中，因为 componentDidMount 仅在组件挂载时执行一次
    setInterval(() => {
      this.setState({ number: this.state.number + 1 })
    }, 1000)
  }
}
